<template>
	<div class="sys-menu">
		<div
			class="list-item"
			@click="changeSys(item, index)"
			v-for="(item, index) in sysMenu"
			:key="item.id"
			:class="{ active: selectIndex === index }"
		>
			{{ item.sysName }}
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { AuthStore } from '@/stores/modules/auth';
import { TabsStore } from '@/stores/modules/tabs';
import { GlobalStore } from '@/stores';
import { useRouter } from 'vue-router';
import { HOME_URL } from '@/config/config';

const router = useRouter();
const authStore = AuthStore();
const globalStore = GlobalStore();
const tabStore = TabsStore();
const themeConfig = computed(() => globalStore.themeConfig);
const sysMenu = authStore.sysMenuListGet;
const selectIndex = ref(0);
const changeSys = async (item: any, index: number) => {
	if (selectIndex.value === index) return;
	selectIndex.value = index;
	// await authStore.setSelectedSysId(item.id);
	authStore.getAuthMenuList();
	tabStore.closeMultipleTab();
	// initDynamicRouter();
	tabStore.changePath('/home/index');
	router.push(HOME_URL);
};
</script>

<style scoped lang="scss">
.sys-menu {
	display: flex;
	align-items: center;
	.list-item {
		box-sizing: border-box;
		padding: 5px 8px;
		cursor: pointer;
		&.active {
			color: #ffffff;
			background: v-bind('themeConfig.primary');
			border-radius: 2px;
		}
	}
}
</style>
